<template>
    <el-container>
        <el-main>
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-card class="box-card" >
                        <div slot="header">
                            <span>组织机构树</span>
                        </div>
                        <el-tree
                                :data="orgData"
                                :props="defaultProps"
                                :default-expanded-keys="expandOrg"
                                node-key="id"
                                :expand-on-click-node="false"
                                @node-click="orgSelect"
                                @node-expand="orgExpand"
                                @node-collapse="orgCollapse"
                        >
                            <span class="custom-tree-node" slot-scope="{node, data}" >
                                <span>{{ node.label}}</span>
                                <!--根节点组织结构不显示按钮-->
                                <span >
                                    <el-button-group>
                                        <el-button
                                                type="text"
                                                size="medium"
                                                icon="el-icon-caret-top"
                                                @click="orgSortUpdate(data,data.sort-1,node)"
                                                v-if="data.id != '0'"
                                        >
                                        </el-button>
                                        <el-button
                                                type="text"
                                                size="medium"
                                                icon="el-icon-caret-bottom"
                                                @click="orgSortUpdate(data,data.sort+1,node)"
                                                v-if="data.id != '0'"
                                        >
                                        </el-button>
                                        <el-button
                                                type="text"
                                                size="medium"
                                                @click="orgAdd(data)"
                                                icon="el-icon-circle-plus"
                                        >
                                        </el-button>
                                        <el-button
                                                type="text"
                                                size="medium"
                                                icon="el-icon-delete-solid"
                                                v-if="data.id != '0'"
                                                @click="orgDelete(data)"
                                                style="color: #f56c6c"
                                        >
                                        </el-button>
                                    </el-button-group>
                                </span>
                            </span>
                        </el-tree>
                    </el-card>
                </el-col>
                <el-col :span="18">
                    <el-card class="box-card" >
                        <div slot="header">
                            <span>组织信息编辑</span>
                        </div>

                        <el-form
                                ref="orgEditForm"
                                :model="orgEditForm"
                                label-width="80px"
                                label-position="right"
                                size="mini"
                                style="width: 600px"
                                :rules="rules"
                        >
                            <el-form-item label="id" prop="id" v-show="false">
                                <el-input v-model="orgEditForm.id" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="组织机构名称" prop="orgName">
                                <el-input v-model="orgEditForm.orgName" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="组织编码" prop="orgCode">
                                <el-input v-model="orgEditForm.orgCode" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="地址" prop="address">
                                <el-input v-model="orgEditForm.address" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话" prop="phone">
                                <el-input v-model="orgEditForm.phone" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="orgEditForm.email" autocomplete="off" ></el-input>
                            </el-form-item>
                            <el-form-item label="是否可用" prop="status">
                                <dict-select
                                        code-name="status"
                                        :dict-value.sync="orgEditForm.status"
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="updateOrg" :disabled="!orgCanEdit">保存菜单</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    import {addOrg,updateSort,deleteOrg,getOrg,getOrgTree,updateOrg} from "@/api/org";
    import {defaultQueryPage,defaultResultPage} from "@/lib/QueryPageUtil";
    import DictSelect from "@/components/SysDictSelect";
    export default {
        name: "OrgManager",
        components:{
            DictSelect
        },
        data(){
            return {
                //组织结构树展开数据
                expandOrg:['0'],
                //组织结构树数据
                orgData:[],
                //组织结构树定义
                defaultProps:{
                    children:"children",
                    label:'orgName',
                    isLeaf:'isLeaf'
                },
                //组织结构是否可编辑
                orgCanEdit:false,
                //组织结构编辑信息
                orgEditForm:{
                    id:null,
                    orgName:null,
                    orgCode:null,
                    address:null,
                    phone:null,
                    email:null,
                    status:null
                },
                rules:{
                    id:[
                        {required:true,message:"id不能为空",trigger:"blur"}
                    ],
                    orgName:[
                        {required:true,message:"不能为空",trigger:"blur"}
                    ],
                    orgCode:[
                        {required:true,message:"不能为空",trigger:"blur"}
                    ],
                    status:[
                        {required:true,message:"是否可用不能为空",trigger:"change"}
                    ]

                },
                orgPage:defaultQueryPage()
            }
        },
        mounted(){
            this.getOrgTree()
        },
        methods:{
            //加载组织结构树
            getOrgTree(){
                getOrgTree()
                    .then(res => {
                        this.orgData = res.data
                    }).catch(err => {
                    this.$message.error(err.message)
                })
            },
            orgSelect(data,node){
                if(data.id === "0"){
                    this.orgCanEdit = true
                    this.$message.warning("根机构不能被修改！")
                    return;
                }
                let getData = {orgId:data.id}
                getOrg(getData)
                    .then(res =>{
                        this.$refs.orgEditForm.resetFields()
                        this.orgCanEdit = true
                        this.orgEditForm = res.data
                    }).catch(err =>{
                    this.$message.error(err.message)
                })

            },
            //组织结构排序更新
            orgSortUpdate(data,newSort,node){
                let orgSortData = {id:data.id,oldSort:data.sort,newSort:newSort,level:data.level}
                updateSort(orgSortData)
                    .then(res => {
                        this.$message.success(data.orgName+"更新排序成功")
                        //更新成功后重新查询组织结构信息
                        this.getOrgTree();
                    }).catch(err => {
                    this.$message.error(err.message)
                })
            },
            //组织结构新增
            orgAdd(data){
                //获取当前组织结构节点的ID，作为父节点Id
                let orgAddData ={orgPid:data.id}
                addOrg(orgAddData)
                    .then(res =>{
                        this.$message.success("节点新增成功！")
                        //新增成功后重新查询组织结构信息
                        this.getOrgTree();
                    }).catch(err => {
                    this.$message.error(err.message)
                })
            },
            //组织结构删除
            orgDelete(data){
                let msg = null
                if(data.isLeaf){
                    msg = "是否确认删除【"+data.orgName+"】？"
                }else{
                    msg = "当前节点【"+data.orgName+"】下包含子组织结构，是否确认全部删除？"
                }
                let deleteData = {orgId:data.id}
                this.$confirm(msg)
                    .then(res => {
                        deleteOrg(deleteData)
                            .then(res => {
                                this.$message.success("删除成功！")
                                //删除后，要重置展开的树节点信息，因为不知道展开的信息中是否包含了被删除的节点
                                this.expandOrg = ['0']
                                //重新查询组织结构树
                                this.getOrgTree();
                            }).catch(err =>{
                            this.$message.error(err.message)
                        })
                    }).catch( _ =>{})

            },
            //组织结构被展开时的操作
            orgExpand(data){
                let index = this.expandOrg.indexOf(data.id);
                if(index === -1){
                    this.expandOrg.push(data.id)
                }

            },
            orgCollapse(data){
                this.expandOrg = this.expandOrg.filter((value) => value !== data.id)
            },
            //更新组织结构信息
            updateOrg(){
                this.$refs.orgEditForm.validate((valid) => {
                    if(valid){
                        updateOrg(this.orgEditForm)
                            .then(res =>{
                                this.$message.success("保存成功！")
                                //保存成功后，重新加载组织结构信息
                                this.getOrgTree()
                            }).catch(err =>{
                            this.$message.error(err.message)
                        })
                    }else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>